<template>
    <div>
        <div class="title">{{title}}</div>
        <div class="layoutBox">
            <div v-for="(item, index) in options" :key="index" class="tagLine">
                <div class="tagClass">
                    {{item.tagClass}}
                </div>
                <div 
                    v-for="(ele, indicator) in item.tags" 
                    :key='indicator' class="tag" 
                    :style="`background: ${ele.value === item.value ? (item.activeColor || '#7E6B5A') : (item.inactiveColor || '#E9E9E9')}; color: ${ele.value === item.value ? '#FFF' : '#222222'}`"
                >
                    {{ele.name}}
                </div>
            </div>
            <div class="customTag">
                <input class="tagInput" @keydown="handleType" v-model="customTagName" placeholder="自定义标签，回车确定" />
                <div class="tag" :style="`background: ${item.activeColor || '#7E6B5A'}; color: #FFF`" v-for="(item, index) in tagsArr" :key="index">
                    {{item}}
                    <div class="closeBtn" @click="delTag(index)">×</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'customtag',
    data() {
        return {
            customTagName: '',
            tagsArr: []
        }
    },
    props: {
        title: {
            type: String
        },
        options: {
            type: Array,
            required: true,
            default: () => []
        }
    },
    methods: {
        handleType(e) {
            console.log('typing', e)
            if(e.keyCode === 13) {
                this.tagsArr.push(this.customTagName);
                this.customTagName = ''
            }
        },
        delTag(index) {
            this.tagsArr.splice(index, 1);
        }
    },
}
</script>
<style scoped>
    .title{
        color: #827060;
        font-size: 1.4rem;
        font-weight: bold;
        margin-bottom: 1rem;
    }
    .tagLine{
        display: flex;
        margin-top: 1rem;
    }
    .tagClass{
        font-size: 1.5rem;
        font-weight: bold;
        color: #888888;
        padding: 1rem 2rem 1rem 0;
    }
    .tagClass img{
        vertical-align: middle;
        margin-bottom: 1px;
    }
    .tag{
        padding: 1rem 2rem;
        border-radius: .4rem;
        background: cyan;
        margin-right: 1rem;
        font-size: 1.4rem;
        position: relative;
    }
    .customTag{
        display: flex;
        margin-top: 1.5rem;
    }
    .tagInput{
        width: 20rem;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        height: 3.2rem;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        margin-right: 2rem;
    }
    .closeBtn{
        position: absolute;
        font-size: 2.2rem;
        right: .2rem;
        top: 0;
    }
</style>